<template>
	<view class="pcindex" :style="{paddingTop:topIndex == 1 || topIndex == 2 ? '200upx':'100upx'}">
		<view class="top">
			<view class="topCont">
				<view class="topItem" :class="index == topIndex ? 'topActive':''" v-for="(item,index) in topList"
					:key="index" @tap="switchTop(index)">{{item}}</view>
			</view>
		</view>
		<view class="tab" v-if="topIndex == 1 || topIndex == 2">
			<view class="tabItem" :class="{'tabItem_active':tabIndex == index}" v-for="(item,index) in tabList"
				:key="index" @tap="switchTab(index)">{{item}}</view>
		</view>
		<!-- 文章 -->
		<my-article v-show="(tabIndex == 0 && (topIndex == 1 || topIndex == 2)) || topIndex == 4" :list="artList"
			:status="status" :contentText="contentText" stateType="0" addType="9" :isNull="isNull"></my-article>
		<!-- 视频 -->
		<my-video ref="myvideo" v-show="(tabIndex == 1 && (topIndex == 1 || topIndex == 2)) || topIndex == 3" :list="videoList" :pagesize="pagesize" :status="status"
			:contentText="contentText" type="0" :isNull="isNull" :topIndex="topIndex"></my-video>
		<!-- 底部 -->
		<Add></Add>
		<!-- <my-bottom :buttomIndex="1"></my-bottom> -->
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import myBottom from './components/bottom.vue';
	import Add from './components/add.vue';
	// import myArticle from '@/components/school/artlist';
	import myArticle from './components/newarticlelist';

	import myVideo from '@/components/school/video';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			myArticle,
			myVideo,
			// myBottom,
			Add,
			uniLoadMore
		},
		data() {
			return {
				// topList: ['主页', '关注', '推荐', '视频', '直播', '文章','学校'], //选项卡列表
				topList: ['主页', '关注', '推荐', '视频', '文章'], //选项卡列表
				tabList: ['文章', '视频'],
				tabIndex: 0,
				topIndex: 2, //选项卡索引值
				artList: [], //文章列表
				videoList: [], //视频列表
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				pagesize: 9,
				userBlackList: [], // 黑名单列表
				isNull: false, //是否为空列表
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index == 1) {
				uni.navigateTo({
					url: '../album/teacher-live'
				})
			} else {
				uni.navigateTo({
					url: '../album/home-sreach'
				})
			}
		},
		onPullDownRefresh() {
			this.page = 1;
			this.isNull = false;
			this.reload = true;
			this.artList = []
			this.videoList = []
			this.userBlackList = []
			this.getUserBlackList()
			this.$refs.myvideo.cleardata();
			switch (this.topIndex) {
				case 1:
					if (this.tabIndex == 1) {
						this.getVideoList({lists_type:this.topIndex});
					} else {
						this.getList(1)
					}
					break
				case 2:
					if (this.tabIndex == 1) {
						this.getVideoList({lists_type:this.topIndex});
					} else {
						this.getList(2)
					}
					break
				case 3:
					this.getVideoList()
					break
				case 4:
					this.getList(4)
					break
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onReachBottom() {
			this.status = 'loading';
			this.page = (this.videoList.length > 0 || this.artList.length > 0) ? this.page += 1 : this.page
			var _this = this;
			setTimeout(function() {
				switch (_this.topIndex) {
					case 1:
						if (_this.tabIndex == 1) {
							_this.getVideoList({lists_type:_this.topIndex});
						} else {
							_this.getList(1)
						}
						break
					case 2:
						if(_this.tabIndex == 1) {
							_this.getVideoList({lists_type:_this.topIndex});
						} else {
							_this.getList(2)
						}
						break
					case 3:
						_this.getVideoList()
						break
					case 4:
						_this.getList(4)
						break
				}
			}, 500);
		},
		onLoad() {
			this.page = 1;
			this.isNull = false;
			this.reload = true;
			this.artList = [];
			this.topIndex = 2;
			this.getList(this.topIndex)
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '抖校'
			})
			// this.getUserBlackList()
			// this.videoList = [];
			if (this.topIndex == 0) {
				this.page = 1;
				this.isNull = false;
				this.reload = true;
				this.artList = [];
				this.topIndex = 2;
				this.tabIndex = 0;
				this.getList(this.topIndex)
			// } else {
			// 	if (this.topIndex == 3) {
			// 		this.getVideoList()
			// 	} else {
			// 		if (this.tabIndex == 1 && (this.topIndex == 1 || this.topIndex == 2)) {
			// 			this.getVideoList({lists_type:this.topIndex});
			// 		} else {
			// 			this.getList(this.topIndex)
			// 		}
			// 	}
			}
			var articleDetail = uni.getStorageSync('articleDetail');
			var articleIndex = uni.getStorageSync('articleIndex');
			if (articleDetail && JSON.stringify(articleDetail) != '{}' && articleIndex) {
				if((this.topIndex == 2 && (this.artList[articleIndex].article_video_id == articleDetail.article_id)) || this.artList[articleIndex].article_id == articleDetail.article_id) {
					this.artList[articleIndex].is_like = articleDetail.is_like;
				}
				uni.removeStorageSync('articleDetail');
				uni.removeStorageSync('articleIndex');
			}
			this.$forceUpdate();
		},
		methods: {
			/* 切换顶部选项卡 */
			switchTop(index) {
				this.topIndex = index;
				this.page = 1;
				this.isNull = false;
				this.reload = true;
				this.tabIndex = 0;
				this.artList = [];
				this.videoList = [];
				this.$refs.myvideo.cleardata();
				switch (this.topIndex) {
					case 0:
						uni.navigateTo({
							url: '/pages/school/my-center?user_id=' + uni.getStorageSync('userInfo').id
						})
						break
					case 1:
						this.getList(1)
						break
					case 2:
						this.getList(2)
						break
					case 3:
						this.getVideoList()
						break
					case 4:
						this.getList(4)
						break
						// case 6:
						// 	uni.navigateTo({
						// 		url: 'sort'
						// 	})
						// 	break
				}
			},
			// 切换选项卡
			switchTab(index) {
				if (this.tabIndex != index) {
					this.tabIndex = index;
					this.page = 1;
					this.isNull = false;
					this.reload = true;
					if (this.tabIndex == 1) {
						this.videoList = [];
						this.$refs.myvideo.cleardata();
						this.getVideoList({lists_type:this.topIndex});
					} else {
						this.artList = [];
						this.getList(this.topIndex);
					}
				}
			},
			// 获取黑名单列表
			getUserBlackList() {
				this.userBlackList = []
				this.$api.apiPost('user/video.User/UserBlackList').then(res => {
					if (res.data.code == 200) {
						this.userBlackList = res.data.data.data
					}
				})
			},
			/* 获取文章列表 */
			getList(type) {
				let data = {
					users_type: 1,
					is_check: 2,
					page: this.page,
					pagesize: 9
				}
				let url = 'user/article.Lists/articleList'
				/**
				 * @type
				 * 0:首页，1:关注，2:推荐，5:文章
				 * */
				switch (type) {
					case 1:
						data.is_user = 2
						break
					case 2:
						url = 'user/shakeschool.Users/recommendList'
						break
					case 4:
						break
				}
				this.$api.apiPost(url, data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						list = util.artHandle(list);
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].creat_time);
							list[i].black_state = false
							if (this.userBlackList.length > 0) {
								this.userBlackList.forEach(v1 => {
									if (list[i].user_id == v1.user_id) {
										list[i].black_state = true
									}
								})
							}
							if (!list[i].type) {
								list[i]['type'] = 1;
							}
						}
						this.artList = this.reload ? list : this.artList.concat(list);
						this.reload = false;
						this.status = 'more';
						console.log('文章列表', this.artList);
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						if (this.reload) {
							this.list = [];
							this.isNull = true;
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 视频列表 */
			getVideoList(e) {
				let data = {
					users_type: 1,
					page: this.page,
					pagesize: 9
				}
				if(e && e.lists_type && e.lists_type == 1) {
					data.lists_type = 2;
				} else if(e && e.lists_type && e.lists_type == 2){
					data.lists_type = 1;
				}
				this.$api.apiPost('user/video.Lists/VideoList', data).then(res => {
					if (res.data.code == 200) {
						var list = res.data.data.data;
						list.forEach((v, i) => {
							v.black_state = false
							if (this.userBlackList.length > 0) {
								this.userBlackList.forEach(v1 => {
									if (v.user_id == v1.user_id) {
										v.black_state = true
									}
								})
							}
							v['key'] = (this.page-1)*9+i
						})
						// this.videoList = this.reload ? list : this.videoList.concat(list);
						this.videoList = list;
						this.reload = false;
						this.status = 'more';
					} else {
						this.page = this.page == 1 ? this.page : this.page -= 1
						if (this.reload) {
							this.list = [];
							this.isNull = true;
						} else {
							this.status = 'noMore';
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pcindex {
		padding: 100upx 0;
	}

	/* 顶部 */
	.top {
		background-color: #003BE4;
		position: fixed;
		left: 0;
		width: 100%;
		height: 100upx;
		background-color: #00D5A2;
		z-index: 998;
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
	}

	.topCont {
		height: 100%;
		background-color: #FFFFFF;
		/* border-radius: 40upx 40upx 0 0; */
		display: flex;
		justify-content: space-around;
		align-items: center;
		white-space: nowrap;
		overflow: auto;
	}

	.topItem {
		color: #999999;
		font-size: 30upx;
		padding: 0 18upx 0 30upx;
		font-weight: 400;
		opacity: 0.8;
		line-height: 1;
	}

	.topActive {
		color: #333333;
		font-size: 34upx;
		font-weight: 500;
	}

	.tab {
		white-space: nowrap;
		overflow: auto;
		height: 100upx;
		width: 100%;
		display: flex;
		position: fixed;
		left: 0;
		background: #FFFFFF;
		z-index: 998;
		/* #ifdef APP-PLUS */
		top: 100upx;
		/* #endif */
		/* #ifdef H5 */
		top: 188upx;
		/* #endif */

		.tabItem {
			color: #333333;
			font-size: 28upx;
			text-align: center;
			position: relative;
			width: 50%;
			line-height: 100upx;
			display: inline-flex;
			flex-direction: column;
		}

		.tabItem_active {
			color: #00D5A2;
		}

		.tabItem:before {
			position: absolute;
			content: '';
			height: 8upx;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;
			background: #E6E6E6;
			border-radius: 4upx;
		}
		.tabItem_active:before{
			background: #00D5A2;
		}
	}
</style>
